<template>
  <div class="app">
    <h1 class="title">Vue3 组件间通信</h1>
    <hr />
    <div class="row">
      <div class="col-xs-3 col-md-3 col-lg-3 col-xl-3">
        <RouterLink active-class="active" class="list-group-item" to="/props">@props</RouterLink>
        <RouterLink active-class="active" class="list-group-item" to="/selfDefineEvent"
          >@自定义事件</RouterLink
        >
        <RouterLink active-class="active" class="list-group-item" to="/mitt">@mitt</RouterLink>
        <RouterLink active-class="active" class="list-group-item" to="/vModel">@vModel</RouterLink>
        <RouterLink active-class="active" class="list-group-item" to="/$attrs">@$attrs</RouterLink>
        <RouterLink active-class="active" class="list-group-item" to="/$RefParent"
          >@$RefParent</RouterLink
        >
        <RouterLink active-class="active" class="list-group-item" to="/provide-inject"
          >@provide-inject</RouterLink
        >
        <RouterLink active-class="active" class="list-group-item" to="/pinia">@pinia</RouterLink>
        <RouterLink active-class="active" class="list-group-item" to="/slot">@slot</RouterLink>
        <RouterLink active-class="active" class="list-group-item" to="/domianSlot"
          >@作用域slot</RouterLink
        >
      </div>
      <div class="col-xs-9 col-md-9 col-lg-9 col-xl-9">
        <div class="panel-body">
          <RouterView></RouterView>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { RouterLink, RouterView } from 'vue-router'
</script>

<style scoped></style>
